<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
        .login-bg{
            background: #fff;
            height: 100vh;
            width: 100vh;
        }
        .login-bg > div{
            position: absolute;
            height: 100%;
            width: 100%;
            right: 0px;
            background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
        	box-sizing: border-box;
            background-position: 0 0;
            background-size: 150%,100%;
            animation: move 3s linear infinite alternate;

        }
         .bg-1::before,.bg-1::after{
            content: "";
            position: absolute;
            /* background-color:#b565d9; */
            width: 50rem;
            height: 50rem;
            border-radius: 50%;
            top: 70%;
            left: 10%;
            box-shadow: 15px 12px 14px rgba(255,255,255, .12), 0 0 6px rgba(0, 0, 0, .04);
            background-image: linear-gradient(120deg, #b565d9 0%, #f5576c 100%);
        } 
        .bg-1::after{
            /* background-color:#e065b0; */
            background-image: linear-gradient(120deg, #e065b0 0%, #f5576c 100%);
            top: 10%;
            left: 70%;
        }

        @keyframes move {
            from {
                /* transform: translate3d(0, 0, 0); */
                background-position: 0 0;
            }
            100%{
                background-position: 100% 0;
            }
        }

    </style>
</head>
<body>
    <div class="login-bg">
        <div class="bg-1"></div>
    </div>
</body>
</html>